<template>
  	<view>

  		<view class="sel_box">
  			<picker mode="multiSelector" :range="xq" @change="xqxz($event.detail)" @columnchange="qb($event.detail)">
  				<view class="sel">
  					<text>{{nb}}</text>
  					<image src="../../../static/img/arrow-down-bold.png" mode=""></image>
  				</view>
  			</picker>
  		</view>

  		<uni-list v-if="qx == false">
  			<uni-list-item  v-for="(n,i) in list" :key="n.id" showArrow
  				:title="i+1 + '. ' + n.cname  " :note="'  课程属性: '+n.attribute">
  				<template slot="footer">
  					<view class="right">
  						<text style="font-size: 14px;">成绩: </text>
  			
  						<text v-if="Number(n.mark)<60" style="color: #F43559;font-size: 14px;">{{n.mark}}\n</text>
  						<text style="font-size: 14px;" v-else>{{n.mark}}\n</text>
  						<text style="font-size: 12px;">{{n.nature}}</text>
  					</view>
  				</template>
  			</uni-list-item>
  		</uni-list>
		
		<!-- 条件渲染:用户选择全部学年时,每个成绩显示学年时间段 -->
		<uni-list v-else="qx == true">
			
			<uni-list-item   v-for="(n,i) in list" :key="n.id" showArrow
				:title="i+1 + '. ' + n.cname +' ('+ n.term+')' " :note="'  课程属性: '+n.attribute">
				<template slot="footer">
					<view class="right">
						<text style="font-size: 14px;">成绩: </text>
			
						<text v-if="Number(n.mark)<60" style="color: #F43559;font-size: 14px;">{{n.mark}}\n</text>
						<text style="font-size: 14px;" v-else>{{n.mark}}\n</text>
						<text style="font-size: 12px;">{{n.nature}}</text>
					</view>
				</template>
			</uni-list-item>
			
		</uni-list>
		
		
  		

  	</view>
  </template>

  <script>
  	export default {
  		data() {
  			return {
  				list: [],
  				nb: '2020-2021-1',
  				xq: [
  					["全部学年", "2020-2021学年", "2019-2020学年", "2018-2019学年", "2017-2018学年"],
  					["全部学期"]
  				],
  				xqvalue: [
  					['全部学年', '2020-2021', '2019-2020', '2018-2019', '2017-2018'],
  					['-1', '-2']
  				],
  				place: ' ',
				qx:false,
				ts:true,

  			}
  		},
  		onShow: function() {
  			try {
  				const value = uni.getStorageSync('marks');
  				if (value) {

  					for (var i = 0; i < value.length; i++) {

  						if ('2020-2021-1' == value[i].term) {

  							this.list.push(value[i]);

  						}
  					}
  				}
  			} catch (e) {
  				// error
  			}

  		},
  		methods: {
			//值改变
  			xqxz: function(e) {
  				var term = this.xqvalue[0][e.value[0]] + this.xqvalue[1][e.value[1]];
  				this.nb = term;
				
  				var marks = []
  				try {
  					const value = uni.getStorageSync('marks');
  					if (value) {

  						marks = value;
  					}
  				} catch (e) {
  					// error
  				}

  				this.list.splice(0);
  				if (e.value[0] == 0) {
					
					//选择全部学年则显示时间
					this.qx = !this.qx;
  					this.list = marks;
  					this.nb = '全部学年';
					
  				} else {
					this.qx = !this.qx;
  					for (var i = 0; i < marks.length; i++) {

  						if (term == marks[i].term) {

  							this.list.push(marks[i]);

  						}
  					}
  				}


  			},
			//监听列表滑动
  			qb: function(res) {

  				if (res.column == 0) {
  					if (res.value == 0) {
  						this.xq[1] = [];
  						this.xq[1].push('全部学期');
						this.ts = true;
						
  					} else {
						if(this.ts){
							this.xq[1] = [];
							this.xq[1].push('第一学期');
							this.xq[1].push('第二学期');
							this.ts = false;
						}
  						
  					}
  					
  				}
  			}

  		}
  	}
  </script>

  <style>
  	@import url("./info.css")
  </style>
